<template>
  <el-dialog
    custom-class="alarm-dialog AlarmHandler lizhi"
    title="报警信息确认"
    :visible="show"
    width="50%"
    min-width="500px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    append-to-body
  >
    <div class="alarm-close" @click="closeDialog">
      <i class="el-icon-close"></i>
    </div>
    <div v-loading="loading" class="alarm-handler">
      <el-form
        ref="updateForm"
        class="dialog-form"
        size="mini"
        :model="updateParams"
        label-width="75px"
        label-position="left"
      >
        <!-- 报警处理 -->
        <div class="sub-title"><i class="el-icon-caret-right"></i>确认结果</div>
        <div class="item-row long">
          <el-form-item label-width="0">
            <el-radio-group v-model="updateParams.alarmType">
              <el-radio label="1">真实火警</el-radio>-->
              <el-radio label="2">误报</el-radio>
              <el-radio label="3">测试</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <template v-if="updateParams.alarmType === '2'">
          <div class="sub-title">
            <i class="el-icon-caret-right"></i>是否设备故障
          </div>
          <div class="item-row long">
            <el-form-item label-width="0">
              <el-radio-group v-model="updateParams.isDeviceFault">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <template v-if="updateParams.isDeviceFault === '1'">
            <div class="sub-title">
              <i class="el-icon-caret-right"></i>处理方式
            </div>
            <div class="item-row long">
              <el-form-item label-width="0">
                <el-radio-group v-model="updateParams.disposeMethod">
                  <el-radio label="10">现场解决</el-radio>
                  <el-radio label="11">上报工单</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
            <template v-if="updateParams.disposeMethod === '10'">
              <div class="sub-title">
                <i class="el-icon-caret-right"></i>现场处理内容
              </div>
              <div class="item-row long">
                <el-form-item label-width="0">
                  <el-input
                    v-model="updateParams.disposeContent"
                    type="textarea"
                    rows="5"
                    maxlength="500"
                    show-word-limit
                    placeholder="请输入现场处理内容"
                  />
                </el-form-item>
              </div>
            </template>
          </template>
          <template v-if="!videoOrDevice && updateParams.isDeviceFault === '0'">
            <div class="sub-title">
              <i class="el-icon-caret-right"></i>误报内容
            </div>
            <div class="item-row long">
              <el-form-item label-width="0">
                <el-radio-group v-model="updateParams.disposeMethod">
                  <el-radio label="1">油烟</el-radio>
                  <el-radio label="2">水蒸气</el-radio>
                  <el-radio label="3">粉尘</el-radio>
                  <el-radio label="4">其他</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </template>
          <template v-if="videoOrDevice && updateParams.alarmType !== '1'">
            <div class="sub-title">
              <i class="el-icon-caret-right"></i>是否消音
            </div>
            <div class="item-row long">
              <el-form-item label-width="0">
                <el-radio-group v-model="updateParams.isSilence">
                  <el-radio label="1">是</el-radio>
                  <el-radio label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </template>
        </template>
        <div class="sub-title">
          <i class="el-icon-caret-right"></i>
          {{
            updateParams.isDeviceFault === "1" &&
            updateParams.disposeMethod === "11"
              ? "隐患内容"
              : "处理意见"
          }}
        </div>
        <div class="item-row long">
          <el-form-item label-width="0">
            <el-input
              v-model="updateParams.disposeSuggest"
              type="textarea"
              rows="5"
              maxlength="500"
              show-word-limit
              :placeholder="
                updateParams.isDeviceFault === '1' &&
                updateParams.disposeMethod === '11'
                  ? '请输入隐患内容'
                  : '请输入处理意见'
              "
            />
          </el-form-item>
        </div>
      </el-form>
      <div class="dialog-footer" style="text-align: right">
        <el-button type="plain" @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import * as resq from "api/AlarmHandler";
export default {
  name: "AlarmHandling",
  props: {
    // 处理类型有三种: 1.报警 2.误报 3.代办
    handleType: {
      type: String,
      default: "1" //处理类型
    },
    // 信息id
    messageId: {
      type:String,
      default: '' //处理类型
    },
    // 显示弹窗
    show: {
      type: Boolean,
      default: false
    },
    // true是视频误报  false设备误报
    videoOrDevice: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      detail: {},
      loading: false,
      updateParams: {
        alarmType: "1",
        isDeviceFault: "1",
        isSilence: '1',
        disposeMethod: "10",
        disposeSuggest: "",
        disposeContent: ""
      }
    };
  },
  watch: {
    // 当show变更时, if show为true,则初始化表单, 反之重置表单
    show: function (val) {
      if (val) {
        let self = this;
        this.$nextTick(() => {
          self.init();
        });
      } else {
        this.$refs["updateForm"].clearValidate();
        this.updateParams = {
          alarmType: "1",
          isDeviceFault: "1",
          isSilence: '1',
          disposeMethod: "10",
          disposeSuggest: "",
          disposeContent: ""
        };
      }
    }
  },
  methods: {
    /**
     * @description: 提交表单数据
     * @return {*}
     */
     submit() {
      this.$refs["updateForm"].validate((valid) => {
        if (valid) {
          if(this.videoOrDevice) {
            this.updateParams.videoAlarmLogId = this.messageId;
            resq.handleAlarmVideo(this.updateParams).then(res => {
              if(res.code === 0 ) {
                this.$message.success("操作成功！");
                this.$emit("closeAlarmHandling");
                this.closeDialog();
              }else {
                this.$message.error(res.msg || '错误');
              }
            }).catch(err => {
              console.log(err);
            })
          }else {
            this.updateParams.deviceMessageAlarmDataId = this.messageId;
            resq.handleAlarm(this.updateParams).then(res => {
              if(res.code === 0 ) {
                this.$message.success("操作成功！");
                this.$emit("closeAlarmHandling");
                this.closeDialog();
              }else {
                this.$message.error(res.msg || '错误');
              }
            }).catch(err => {
              console.log(err);
            })
          }
          console.log(res);
        }
      });
    },
    /**
     * @description: 获取设备数据
     * @return {*}
     */
    init() {
      this.updateParams.alarmType = this.handleType;
    },
    /**
     * @description: 关闭弹窗时向父组件发送自定义 show更新 事件
     * @return {*}
     */
    closeDialog() {
      //当面板关闭(点击关闭按钮)
      this.$emit("update:show", false);
    }
  }
};
</script>
<style lang="scss">
.alarm-dialog {
  .alarm-close {
    position: absolute;
    font-size: 18px;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }
  .alarm-title {
    font-size: 18px;
    color: #02c3ff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .alarm-handler {
    padding-top: 40px;
    .sub-title {
      color: #02c3ff;
      font-size: 16px;
      padding-bottom: 20px;
    }
    .item-row {
      padding: 5px 0 5px 16px;
      display: flex;
      .el-form-item {
        flex: 1;
      }
    }
  }
}
</style>
